<script setup>
    // 景区数据：排名、名称、进度百分比、预约数量（单位w）、进度条颜色
    const scenicData = [
        { rank: 'NO.1', name: '峨眉山', percent: 80, value: 8, color: '#26B99A' },
        { rank: 'NO.2', name: '稻城亚丁', percent: 60, value: 6, color: '#FAA43A' },
        { rank: 'NO.3', name: '九寨沟', percent: 50, value: 5, color: '#3498DB' },
        { rank: 'NO.4', name: '万里长城', percent: 40, value: 4, color: '#F0CB35' },
        { rank: 'NO.5', name: '北京故宫', percent: 30, value: 3, color: '#9B59B6' },
    ];
</script>
<template>
    <div class="box">
        <!-- 顶部标题部分保持不变 -->
        <div class="top">
            <div>
                <p class="title">热门景区排行</p>
                <img
                    src="../../images/dataScreen-title.png"
                    alt=""
                >
            </div>
        </div>

        <!-- 重构为表格形式 -->
        <div class="table-container">
            <!-- 表头 -->
            <div class="table-header">
                <div class="header-cell rank-cell">排名</div>
                <div class="header-cell name-cell">景区</div>
                <div class="header-cell value-cell">预约数量</div>
            </div>

            <!-- 表格内容 -->
            <div class="table-body">
                <div
                    v-for="item in scenicData"
                    :key="item.rank"
                    class="table-row"
                >
                    <div class="table-cell rank-cell">
                        <span class="rank-number">{{ item.rank }}</span>
                    </div>
                    <div class="table-cell name-cell">
                        <span class="scenic-name">{{ item.name }}</span>
                    </div>
                    <div class="table-cell value-cell">
                        <div class="progress-container">
                            <div
                                class="progress-bar"
                                :style="{
                                    width: item.percent + '%',
                                    backgroundColor: item.color
                                }"
                            ></div>
                        </div>
                        <span class="value-text">{{ item.value }}w</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .box {
        background: url(../../images/dataScreen-main-lb.png) no-repeat;
        background-size: 100% 100%;
        margin-top: 10px;

    }

    .top {
        margin-left: 20px;
        height: 70px;
        display: flex;
        align-items: center;
    }

    .top .title {
        color: white;
        font-size: 20px;
    }

    .top img {
        margin-top: 10px;
    }

    /* 表格样式 */
    .table-container {
        flex: 1;
        margin: 20px;
        display: flex;
        flex-direction: column;
    }

    /* 表头样式 */
    .table-header {
        display: flex;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        margin-bottom: 10px;
    }

    .header-cell {
        color: white;
        font-weight: bold;
        font-size: 14px;
    }

    .rank-cell {
        width: 15%;
    }

    .name-cell {
        width: 30%;
    }

    .value-cell {
        width: 55%;
    }

    /* 表格内容样式 */
    .table-body {
        flex: 1;
        overflow-y: auto;
    }

    .table-row {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .table-cell {
        display: flex;
        align-items: center;
    }

    .rank-number {
        color: white;
        font-size: 14px;
    }

    .scenic-name {
        color: white;
        font-size: 14px;
    }

    /* 进度条和数量组合样式 */
    .value-cell {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .progress-container {
        flex: 1;
        height: 15px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        overflow: hidden;
        position: relative;
    }

    .progress-bar {
        height: 100%;
        border-radius: 8px;
        transition: width 0.5s ease;
    }

    .value-text {
        color: white;
        font-size: 12px;
        min-width: 30px;
        text-align: right;
    }
</style>